<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <data-component></data-component>
        <div>
          <title-card title="时间范围（天）"></title-card>
          <pre-code style="margin-bottom:10px;" :code="dayHtml" language="xml" />
          <pre-code :code="dayJs" language="JavaScript" />

          <title-card title="时间范围（周）"></title-card>
          <pre-code style="margin-bottom:10px;" :code="weekHtml" language="xml" />
          <pre-code :code="weekJs" language="JavaScript" />

          <title-card title="时间范围（月）"></title-card>
          <pre-code style="margin-bottom:10px;" :code="monthHtml" language="xml" />
          <pre-code :code="monthJs" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="DatePicker">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import DataComponent from "./DataComponent/index.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const dayHtml = ref(`<el-date-picker
  v-model="countData.startTime"
  type="datetime"
  placeholder="开始时间"
  :disabled-date="pickerOptionsStart"
>
</el-date-picker>

<el-date-picker
  v-model="countData.endTime"
  type="datetime"
  placeholder="结束时间"
  :disabled-date="pickerOptionsEnd"
>
</el-date-picker>`)
const dayJs = ref(`const pickerOptionsStart = (time) => {
  if (countData.value.endTime) {
    return Boolean(
      time.getTime() <= Date.now() - 8.64e6 ||
      time.getTime() >=
        moment(
          countData.value.endTime
        ) /*开始日期要在选择的结束日期之前*/
    );
  }
  return Boolean(time.getTime() <= Date.now() - 8.64e7); /*今天及以后*/
};

const pickerOptionsEnd = (time) => {
  if (countData.value.startTime) {
    return Boolean(
      time.getTime() < Date.now() - 8.64e6 ||
      time.getTime() <
        moment(
          countData.value.startTime
        ) /*结束日期要在选择的开始日期之后*/
    );
  }
  return Boolean(time.getTime() <= Date.now() - 8.64e7); /*今天及以后*/
};`)
const weekHtml = ref(`<el-date-picker
  v-model="countData.startTime"
  type="week"
  placeholder="开始周"
  format="YYYY 第 ww 周"
  :disabled-date="weekOptionsStart"
  @change="pickerChange"
>
</el-date-picker>

<el-date-picker
  v-model="countData.endTime"
  type="week"
  placeholder="结束周"
  format="YYYY 第 ww 周"
  :disabled-date="weekOptionsEnd"
  @change="pickerChange"
>
</el-date-picker>`)
const weekJs = ref(`const weekOptionsStart = (time) => {
  if (countData.value.endTime) {
    return Boolean(
      time.getTime() <
        moment()
          .week(moment().week() - (weekChecked.value ? 1 : 0))
          .endOf('week') +
          8.64e7 ||
      time.getTime() >=
        moment(countData.value.endTime).endOf('week') +
          8.64e7 /*开始日期要在选择的结束日期之前*/
    );
  }
  return Boolean(
    time.getTime() <
    moment()
      .week(moment().week() - (weekChecked.value ? 1 : 0))
      .endOf('week') +
      8.64e7
  ); /*上周日以后*/
};

const weekOptionsEnd = (time) => {
  if (countData.value.startTime) {
    return Boolean(
      time.getTime() <=
        moment()
          .week(moment().week() - (weekChecked.value ? 1 : 0))
          .endOf('week') +
          8.64e7 ||
      time.getTime() <=
        moment(countData.value.startTime).startOf(
          'week',
        ) /*结束日期要在选择的开始日期之后*/
    );
  }
  return Boolean(
    time.getTime() <
    moment()
      .week(moment().week() - (weekChecked.value ? 1 : 0))
      .endOf('week') +
      8.64e7
  ); /*上周日以后*/
};`)
const monthHtml = ref(`<el-date-picker
  type="monthrange"
  v-model="countData.time"
  :disabled-date="monthOptionsStart"
  range-separator="至"
  start-placeholder="开始月份"
  end-placeholder="结束月份"
  @change="pickerChange"
>
</el-date-picker>`)
const monthJs = ref(`const monthOptionsStart = (time) => {
  return Boolean(
    time.getTime() <
    moment(
      moment()
        .month(moment().month() - (monthChecked.value ? 1 : 0))
        .endOf('month'),
    )
  ); /*上月以后*/
};`)

const getTitle = () => {
  postArticleDetail({
    route: 'DatePicker',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
